import React from 'react'
import { Timeline as AntdTimeline } from 'antd'
import styles from './styles.module.less'
import { DnFC } from '@designable/react'

interface TimelineProps {
  titleKey?: string
  tipsKey?: string
  value?: any[]
  defaultValue?: any[]
  style?: React.CSSProperties
}

export const Timeline: DnFC<TimelineProps> = (props) => {
  const titleKey = props.titleKey || 'remark'
  const tipsKey = props.tipsKey || 'createTime'
  const value = props.value || []
  const style = props.style || {}
  return (
    <div style={style}>
      <AntdTimeline>
        {value.reverse().map((v: any, index: number) => (
          <AntdTimeline.Item key={index} className={styles.timelineItem}>
            <p className={styles.title}>{v[titleKey]}</p>
            <p className={styles.tips}>{v[tipsKey]}</p>
          </AntdTimeline.Item>
        ))}
      </AntdTimeline>
    </div>
  )
}
